<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="bg-red">
    <Dynamicform v-model="formResult" :allFormList="list" @change="handleFormUpdate" ref="dynamicform"
      style="height: 100%; overflow: auto"></Dynamicform>
    <el-footer class="my-Footer" style="text-align: center">
      <el-button type="primary" @click="resetForm">重置表单</el-button>
      <el-button type="primary" @click="getData">获取数据</el-button>
      <el-button type="primary" @click="goValidate">校验</el-button>
    </el-footer>
  </div>
</template>
<script lang="ts">
import { Dynamicform } from "kda-form";
import { Ref, computed, defineComponent, ref } from "vue";
import Store from "../Server";
export default defineComponent({
  components: { Dynamicform },
  setup() {
    // const list = computed(() => Store?.get("allFormList"));
    const list = [
      {
        "ControlType": "CheckBox",
        "nameCn": "复选框",
        "tags": [],
        "id": "HcmUm2oFGj81rlpOzrmLZ",
        "layout": false,
        "data": {
          "fieldName": "CheckBox_a4meDzu0G647ZRCTgC1bk",
          "label": "标签名称",
          "tip": "",
          "value": "",
          "showRule": "{}",
          "required": false,
          "rule": "[]",
          "default": false,
          "itemConfig": {
            "value": [
              "选项1"
            ],
            "items": [
              {
                "label": "选项1",
                "value": "选项1",
                "select": true,
                "id": 1
              },
              {
                "label": "选项2",
                "value": "选项2",
                "select": false,
                "id": 2
              }
            ]
          }
        }
      },
      {
        "ControlType": "ColorSelect",
        "nameCn": "颜色选择",
        "tags": [],
        "id": "sGsjWb_t2vOWEmJeUSuU_",
        "layout": false,
        "data": {
          "fieldName": "ColorSelect_wAdxALDpivsU7VcnEAKAi",
          "label": "标签名称",
          "tip": "",
          "placeholder": "",
          "showRule": "{}",
          "required": false,
          "rule": "[]",
          "default": "#409EFF"
        }
      },
      {
        "ControlType": "Text",
        "nameCn": "文本框",
        "tags": [],
        "id": "Ey6vCoglSF7Isdraf_hwe",
        "layout": false,
        "data": {
          "fieldName": "Text_fkVdwDA_QmVJvFnc5VuMw",
          "label": "标签名称",
          "tip": "",
          "placeholder": "",
          "showRule": "{}",
          "required": false,
          "rule": "[]",
          "default": ""
        }
      }
    ]
    console.log(list);
    const dynamicform = ref();
    const formResult: Ref<any> = ref({});
    return {
      formResult,
      dynamicform,
      list,
      getData() {
        console.log(formResult);
      },
      resetForm() {
        dynamicform.value.reset();
      },
      goValidate() {
        console.log(dynamicform.value);
        dynamicform.value.getValidate();
      },
      handleFormUpdate(data: any) {
        console.log("表单更新回调", data);
      },
    };
  },
});
</script>
<style lang="scss">
.preview {
  width: 100%;
  height: 100%;
  position: relative;

  .btnlist {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid rgb(190, 186, 186);
    background: white;
    padding: 10px 0;
    z-index: 1;
  }
}
</style>
